<template>
  <div>
    <div style="width: 80%; text-align: left; margin: 20px;">
      <Power url="/sys/role/insert">
        <el-button type="primary" @click="open_insert_dialog">添加角色</el-button>
      </Power>
    </div>
    <!-- 角色列表 -->
    <Table ref="myTable" :param="table"></Table>

    <!-- 新增部门的弹出框 -->
    <el-dialog
      title="新增角色"
      :visible.sync="basic.dialogVisible"
      width="30%">

      <!-- 表单区域 -->
      <el-form ref="form" :model="form">
        <el-form-item label="角色名称">
          <el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="所属部门">
           <br/>
           <el-select v-model="form.depId" placeholder="请选择所属部门">
              <el-option v-for="dep in deps" :label="dep.depName" :value="dep.id"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="角色标识">
          <el-input v-model="form.roleTag" placeholder="请输入角色标识"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="form.roleInfo" type="textarea" placeholder="请输入角色描述"></el-input>
        </el-form-item>
      </el-form>
      <!-- 表单区域 -->

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="insert_role">新 增</el-button>
        <el-button @click="basic.dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 设置权限的抽屉 -->
    <el-drawer
      title="设置权限"
      :visible.sync="basic.drawer"
      :direction="basic.direction">

      <!-- 权限树 -->
      <el-tree
        :data="powerTree"
        check-strictly="true"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current>
      </el-tree>

      <el-button type="primary" @click="updatePowers">修改权限</el-button>
    </el-drawer>
  </div>
</template>

<script>
  //自定义的表格组件
  import Table from './Table'

  export default {
    components: {
      Table
    },
    data(){
      return {
        //权限树的数据
        powerTree: [],
        //被选中的权限id集合
        pids: [],
        //部门列表
        deps: [],
        //新增角色的表单对象
        form: {
        },
        //设置权限的表单对象
        setPowerForm: {
          //角色id
          rid:"",
          //权限id的集合
          pids: []
        },
        basic: {
          //弹出框的属性
          dialogVisible: false,
          //抽屉的展示
          drawer: false,
          //抽屉的方向
          direction: "ltr"
        },
        table: {
          //表头
          title: [
            {title:"角色编号", attr:"id"},
            {title:"所属部门", attr:"depName"},
            {title:"角色名称", attr:"roleName"},
            {title:"角色标识", attr:"roleTag"},
            {title:"角色信息", attr:"roleInfo"},
            {title:"创建时间", attr:"createTime"}
          ],
          //请求的url
          url: "/sys/role/list",
          //请求的数据
          data: {},
          //后续的操作按钮
          btns: {
            enable: true,
            //操作列表
            actions: [
              {
                btnName: "设置权限", callable: (val) => {
                console.log("设置权限：", val);
                //确定设置权限的角色id
                this.setPowerForm.rid = val.id;
                //打开抽屉 （展示权限树 而且 当前角色拥有的权限 要自动勾选）
                this.basic.drawer = true;
                //发送ajax请求，去请求权限列表
                this.$.ajax({
                  url: "/sys/power/queryPowerTreeByRid",
                  data: {
                    rid: this.setPowerForm.rid
                  },
                  success: (data) => {
                    //设置给权限树
                    this.powerTree = data;

                    // //被选中的权限id集合
                    // var pids = [];
                    // //遍历出所有拥有权限的 权限id号
                    // data.forEach((p) => {
                    //   if(p.checked) {
                    //     //当前权限是被选中的，记录被选中的权限id
                    //     pids.push(p.id);
                    //   }
                    // });

                    //清空原来被选中权限id集合
                    this.pids = [];
                    //递归遍历所有被选中的权限id
                    this.foreachPowerTrees(data);

                    //设置权限树选中的情况
                    this.$refs.tree.setCheckedKeys(this.pids);
                  }
                });
              }}
            ]
          },
          //分页参数
          page: {
            //是否需要开启分页的功能
            enable: true,
            //当前第几页
            pageNum: 1,
            //每页多少行记录
            pageSize: 5
          }
        }
      }
    },
    methods: {
      //打开新增的弹出框
      open_insert_dialog(){
        this.basic.dialogVisible = true;
      },
      //新增部门
      insert_role(){
        this.$.ajax({
          type: "POST",
          url: "/sys/role/insert",
          data: this.form,
          success: (data) => {
            //清空表单
            this.form = {};
            //关闭弹窗
            this.basic.dialogVisible = false;
            //刷新表格
            this.$refs.myTable.request();
          }
        });
      },
      //请求部门列表
      requestDepList(){
        this.$.ajax({
          url: "/sys/dep/list",
          success: (data) => {
            this.deps = data;
          }
        });
      },
      //遍历权限树的集合 - 递归，获取被选中的权限id
      foreachPowerTrees(powerTree){
        if(!powerTree || powerTree.length <= 0){
          return;
        }

        powerTree.forEach(p => {
          if(p.checked){
            this.pids.push(p.id);
          }

          //如果还有子权限
          this.foreachPowerTrees(p.children);
        });
      },
      //修改角色所对应的权限
      updatePowers(){
        //设置被选中的权限id数组
        this.setPowerForm.pids = this.$refs.tree.getCheckedKeys();
        console.log("更改角色的权限：", this.setPowerForm);

        //ajax发送请求
        this.$.ajax({
          type: "POST",
          url: "/sys/role/updatePowers",
          data: this.setPowerForm,
          success: (data) => {
            this.$message.success("权限修改成功！");
          }
        });
      }
    },
    mounted(){
      this.requestDepList();
    }
  }
</script>


<style>
</style>
